<!--
 * @Description:
 * @Author: ZachGmy
 * @Date: 2020-09-03 09:57:40
 * @LastEditors: ZachGmy
 * @LastEditTime: 2022-06-15 09:48:56
-->
<template>
  <div>
    <!-- 头部按钮 -->
    <div class="header">
      <el-button @click="toAdd" type="primary" size="small">新增</el-button>
    </div>
    <!-- 内容展示 -->
    <div class="show">
      <el-table
        :data="hosList"
        style="width: 100%; margin-top: 10px"
        border
        :header-cell-style="{ background: '#185DAD', color: 'white' }"
        size="small"
      >
        <el-table-column type="index" label="序号" align="center" width="50px">
        </el-table-column>
        <el-table-column
          prop="name"
          label="医院名称"
          align="center"
          width="120px"
        >
        </el-table-column>
        <el-table-column
          prop="province"
          label="医院简介"
          align="center"
          width="120px"
        >
        </el-table-column>
        <el-table-column
          prop="city"
          label="医院地址"
          align="center"
          width="100px"
        >
        </el-table-column>
        <el-table-column prop="flags" label="标记" align="center">
        </el-table-column>
        <el-table-column
          prop="longitude"
          label="经度"
          align="center"
          width="100px"
        >
        </el-table-column>
        <el-table-column
          prop="latitude"
          label="纬度"
          align="center"
          width="100px"
        >
        </el-table-column>
        <el-table-column prop="zip" label="操作" align="center" width="150px">
          <template slot-scope="scope">
            <el-button @click="toedit(scope.row)" type="primary " size="mini"
              >修改</el-button
            >
            <el-button type="danger " size="mini" @click="todel(scope.row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <el-pagination
      @current-change="handleCurrentChange"
      :current-page.sync="page"
      :page-size="pageSize"
      layout="total, prev, pager, next"
      :total="total"
    >
    </el-pagination>
    <!-- 模态框 -->
    <!-- 模态框 -->
    <el-dialog
      v-if="dialogVisible"
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      width="80%"
    >
      <!-- 表单区域 -->

      <el-form
        :model="hostForm"
        :rules="hostRlues"
        ref="hostForm"
        label-width="100px"
      >
        <!-- 医院名称 -->
        <el-form-item label="医院名称" prop="name">
          <el-input v-model="hostForm.name"></el-input>
        </el-form-item>
        <!-- 医院介绍 -->
        <el-form-item label="医院介绍" prop="introduce">
          <el-input v-model="hostForm.introduce"></el-input>
        </el-form-item>
        <!-- 省市 -->
        <el-form-item label="省市" prop="pca">
          <el-cascader
            v-model="hostForm.pca"
            :props="{ label: 'name', value: 'name' }"
            :options="pca"
          ></el-cascader>
        </el-form-item>

        <!-- 详细地址 -->
        <el-form-item label="详细地址" prop="address">
          <el-input v-model="hostForm.address"></el-input>
        </el-form-item>
        <!-- 标记 -->
        <el-form-item label="标记" prop="flags">
          <el-input v-model="hostForm.flags"></el-input>
        </el-form-item>
        <!-- 经度 -->
        <el-form-item label="经度" prop="longitude">
          <el-input v-model="hostForm.longitude"></el-input>
        </el-form-item>
        <!-- 纬度 -->
        <el-form-item label="纬度" prop="latitude">
          <el-input v-model="hostForm.latitude"></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="toSubmint">提交</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import pca from "@/assets/pca.json";
import { get, post } from "@/utils/request";
export default {
  data() {
    return {
      hosList: [],
      page: 1,
      pageSize: 4,
      total: 10,
      // 控制模态框的显示与隐藏
      dialogVisible: false,
      // 设置模态框的标题
      dialogTitle: "",
      // 表单对象
      hostForm: {},
      // 表单验证
      hostRlues: {
        name: [{ required: true, message: "请输入医院名称", trigger: "blur" }],
        introduce: [
          { required: true, message: "请输入医院介绍", trigger: "blur" },
        ],
        address: [
          { required: true, message: "请输入医院详细地址", trigger: "blur" },
        ],
        flags: [{ required: true, message: "请输入医院标记", trigger: "blur" }],
        longitude: [{ required: true, message: "请输入经度", trigger: "blur" }],
        latitude: [{ required: true, message: "请输入纬度", trigger: "blur" }],
        pca: [{ required: true, message: "请选择省市", trigger: "change" }],
      },
      pca,
      id: "",
    };
  },
  created() {
    this.gethosList();
  },
  methods: {
    async gethosList() {
      // 设置参数
      let params = {
        page: this.page,
        pageSize: this.pageSize,
      };
      // 发送网络请求
      let res = await get("/hospital/pageQuery", params);
      console.log(res);
      // 赋值
      this.hosList = res.data.list;
      this.total = res.data.total;
    },
    // 提交按钮方法
    toSubmint() {
      // 表单验证提交方法
      this.$refs["hostForm"].validate(async (valid) => {
        if (valid) {
          // 将表单对象提交到对应的接口中
          let params = {
            id: this.id,
            name: this.hostForm.name,
            introduce: this.hostForm.introduce,
            address: this.hostForm.address,
            flags: this.hostForm.flags,
            longitude: this.hostForm.longitude,
            latitude: this.hostForm.latitude,
            province: this.hostForm.pca[0],
            city: this.hostForm.pca[1],
            area: this.hostForm.pca[2],
          };
          let res = await post("/hospital/saveOrUpdate", params);
          if (res.status == 200) {
            // 提交成功之后给提示
            this.$notify({
              title: "成功",
              message: res.message,
              type: "success",
            });
          } else {
            // 失败给提示
            this.$notify({
              title: "失败",
              message: res.message,
              type: "success",
            });
          }
          // 关闭模态框
          this.dialogVisible = false;
          // 刷新页面
          this.gethosList();
        } else {
          return false;
        }
      });

      console.log(this.hostForm.pca[0]);
    },
    // 删除方法
    todel(id) {
      // console.log(id);
      // 消息提示的确认
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        // 点击确定按钮的执行方法
        .then(async () => {
          // 发送网络请求
          let res = await get("/hospital/deleteById", { id });
          if (res.status == 200) {
            // 请求成功信息
            this.$message({
              type: "success",
              message: "删除成功!",
            });
            // 刷新页面数据
            this.gethosList();
          } else {
            // 请求失败提示信息
            this.$message({
              type: "erro",
              message: "删除失败!",
            });
          }
        })
        // 点击取消按钮执行方法
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 编辑方法
    toedit(row) {
      // 设置模态框标题
      this.dialogTitle = "修改医院相关信息";
      // 获取数据 赋值到模态框 ...为深拷贝
      this.hostForm = { ...row };
      this.hostForm.pca = [
        this.hostForm.province,
        this.hostForm.city,
        this.hostForm.area,
      ];

      this.id = row.id;
      // 弹出模态框
      this.dialogVisible = true;
    },
    // 新增方法
    toAdd() {
      // 设置模态框的标题
      this.dialogTitle = "增加医院相关信息";
      // 清空表单对象中的数据
      this.hostForm = {};
      // 弹出模态框
      this.dialogVisible = true;
    },
    // 分页
    handleCurrentChange(val) {
      this.page = val;
      this.gethosList();
    },
  },
};
</script>

<style scoped>
</style>
